<template>
    <div class="app-container">
        <div class="updateAdvertise">

            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
                size="default" status-icon>
                <el-form-item label="广告名称" required prop="name">

                    <el-input size="default" v-model="ruleForm.name" placeholder="请输广告名称" class="input1" />
                </el-form-item>
                <el-form-item label="广告位置">
                    <el-select v-model="advertiseVal.type" class="input1" placeholder="请选择" size="default">
                        <el-option v-for="item in options" :key="item.type" :label="item.label" :value="item.type" />
                    </el-select>
                </el-form-item>

                <el-form-item label="开始时间" required prop="startTime">
                    <el-date-picker v-model="ruleForm.startTime" type="datetime" placeholder="请选择时间" :size="size"
                        format='YYYY-MM-DD' @change="dateChange" />
                </el-form-item>
                <el-form-item label="到期时间" required prop="endTime">
                    <el-date-picker v-model="ruleForm.endTime" type="datetime" placeholder="请选择时间" :size="size"
                        format='YYYY-MM-DD' @change="dateChange" />
                </el-form-item>
                <el-form-item label="上线/下线">
                    <el-radio-group v-model="ruleForm.status" :active-value="1" :inactive-value="0">
                        <el-radio :label="1">上线</el-radio>
                        <el-radio :label="0">下线</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="广告图片">

                    <el-upload v-model:file-list="fileList" class="upload-demo"
                        action="http://xue.cnkdl.cn:9082/mall-admin/home/advertise/create" :on-preview="handlePreview"
                        :on-remove="handleRemove" list-type="picture" :on-success="hdSuccess">
                        <el-button type="primary">点击上传</el-button>
                        <template #tip>
                            <div class="el-upload__tip">
                                只能上传jpg/png文件,且不超过100kb
                            </div>
                        </template>
                    </el-upload>
                </el-form-item>
                <el-form-item label="排序">
                    <el-input v-model="ruleForm.sort" class="input1" />
                </el-form-item>
                <el-form-item label="广告链接" prop="url" required>
                    <el-input v-model="ruleForm.url" class="input1" />
                </el-form-item>
                <el-form-item label="广告备注" prop="note">
                    <el-input v-model="ruleForm.note" type="textarea" class="textarea" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">
                        确认
                    </el-button>

                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
  
<script lang="ts" setup>
import * as http from '@/request/http';
import { reactive, ref } from 'vue'
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
import type { UploadProps, UploadUserFile } from 'element-plus'
const advertiseVal = reactive({
    name: '',
    endTime: '',
    type: '',
})
const options = [
    {
        type: '0',
        label: 'PC首页轮播',
    },
    {
        type: '1',
        label: 'APP首页轮播',
    },
]

const ruleForm = reactive<updateAdvertiseListModel>({
    id: 0,
    name: '',
    type: '',
    pic: '',
    startTime: '',
    endTime: '',
    status: -1,
    clickCount: -1,
    orderCount: -1,
    url: '',
    note: '',
    sort: -1,

})

const fileList = ref<UploadUserFile[]>([
    {
        name: 'food.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
    },
])
const hdSuccess = () => {
    ruleForm.pic = `https://images.cnkdl:cn/mall/20230709/949ca027-5210-4361-b472-b776e2d03827.jpg`
    // fileList.value[0].name = ruleForm.pic
    // fileList.value[0].url = ruleForm.pic
}
// 图片
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles)
}
const handlePreview: UploadProps['onPreview'] = (file) => {
    console.log(file)
}
const size = ref<'default' | 'large' | 'small'>('default')
const formSize = ref('default')
console.log(formSize);
const dateChange = () => {
    console.log(123);
}
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules<updateAdvertiseListModel>>({
    name: [
        { required: true, message: '请输入广告名称', trigger: 'blur' },
    ],
    startTime: [
        {
            type: 'date',
            required: true,
            message: '请选择时间',
            trigger: 'change',
        },
    ],
    endTime: [
        {
            type: 'date',
            required: true,
            message: '请选择时间',
            trigger: 'change',
        },
    ],
    url: [
        {
            required: true,
            message: '请输入地址',
            trigger: 'blur',
        },
    ],
    note: [
        {
            required: true,
            message: '请输入备注',
            trigger: 'blur',
        },
    ],

})
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, _fields) => {
        if (valid) {
            ElMessageBox.confirm(
                '是否提交数据 ? ',
                '提示',
                {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {

                    http.updateAdvertise.advertiseCreate(ruleForm).then(
                        _res => {
                            ElMessage.success('添加成功');
                        }
                    )
                })
                .catch(() => {
                    ElMessage.error('添加失败');

                })
        } else {
            ElMessage.success('取消添加');

        }
    })
}
</script>
  
<style scoped lang="less">
.updateAdvertise {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    min-height: 650px;
    width: 990px;
    border: 1px solid #ccc;
    overflow: hidden;
    padding: 20px;

    &::-webkit-scrollbar {
        width: 0;
    }
}

:deep(.input1) {
    width: 340px;

}

:deep(.textarea) {
    width: 340px;

}
</style>
  
  
  